<template>
	<div class="select">
		<div v-if="initloading" class="select-loading">
			<el-icon class="is-loading"><el-icon-loading /></el-icon>
		</div>
		<el-cascader v-bind="$attrs" v-model="value" :separator="separator" :props="props" :loading="loading" @visible-change="visibleChange" style="width: 100%"></el-cascader>
	</div>
</template>

<script>

	export default {
		props: {
			separator: { type: String, default: '/' },
		},
		data() {
			return {
				initloading: false,
				loading: false,
				options: [],
				value: [],
				params: {

				},
				props: {
					expandTrigger: 'hover',
					lazy: true,
					//checkStrictly:true,
					lazyLoad: async (node, resolve) => {
						if (typeof(node.value) != 'undefined'){
							this.params.pid= node.value;
						}
						let nodes = await this.getRemoteData(this.params)
						resolve(nodes)
						this.params={}
					}
				},
			}
		},
		created() {
			//如果有默认值就去请求接口获取options
			if(this.$attrs.modelValue && this.$attrs.modelValue.length > 0){
				this.initloading = true
				this.getRemoteData();
			}
		},
		computed:{
			value: function(){
				return this.$attrs.modelValue;
			}
		},
		watch:{

		},
		methods: {
			//选项显示隐藏事件
			visibleChange(ispoen){
				if(ispoen && this.options.length==0 && (this.dict || this.apiObj)){
					this.getRemoteData()
				}
			},
			// 根据参数获取列表
			async getRemoteData() {
				const res = await this.$API.system.area.list.get(this.params)
				// 动态节点
				const nodes = []
				if (res.code == 200){
					res.data.map((item) => {
						let area = {
							value: item.id,
							label: item.name,
							leaf: item.level > 2,
						};
						nodes.push(area)
					})
				}
				this.loading = false
				this.initloading = false
				return nodes;
			},
		}
	}
</script>

<style scoped>
	.select {display: inline-block;position: relative;}
	.select-loading {position: absolute;top:0;left:0;right:0;bottom:0;background: #fff;z-index: 100;border-radius: 5px;border: 1px solid #EBEEF5;display: flex;align-items: center;padding-left:10px;}
	.select-loading i {font-size: 14px;}

	.dark .select-loading {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
</style>